<template>
  <dl class="items">
    <dd>
      <a href="javascript:void(0)" @click="$emit('click', id)">
        <div class="size">文件大小:<em>{{ filesize(size) }}</em></div>
		<div class="visit">浏览:<em>{{ visitNum }}</em></div>
		<div class="score">积分:<em>{{ score }}</em></div>
        <img class="thumbimg" :src="extension" />
      </a>
    </dd>
    <dt>
      <a href="javascript:void(0)" @click="$emit('click', id)">{{ title }}</a>
    </dt>
  </dl>
</template>

<script>
export default {
  name: "ResourceItem",
  props: {
     id: {
        type: [Number, String],
        required: true ,
     },
     size: {
       type:Number,
       required: true,
     },
     title: {
       type: String,
       required: true ,
     },
     score: {
       type: Number,
        required: true ,
     },
     visitNum: {
        type: Number,
        required: true
     },
     ext: {
       type: String,
       required: true
     }
  },
  emits: ["click"] ,
  computed: {
    extension(){
      let ext = "" ;
      let supportExts = ["doc" , "docx", "exe", "gif", "gz", "html", "md", "mp4" , "pdf", "png" , "ppt" , "pptx" , "rar" , "rmvb" , "txt" , "wps" , "xls" , "xlsx" , "zip", "7z", "avi" , "bmp"] ;
      if (supportExts.includes(this.ext)) {
        ext = this.ext ;
      }else{
        ext = "unknow" ;
      }
      // 在 Vue3 中 动态加载图片地址的方式
      return new URL("../assets/images/" + ext + ".svg", import.meta.url).href ;

    }
  },
  methods: {
    filesize(value) {
      if (value > 1 << 30) {
        return (value / (1 << 30)).toFixed(1) + "GB" ;
      }else if(value > 1 << 20) {
        return (value / (1 << 20)).toFixed(1) + "MB" ;
      }else if(value > 1 << 10) {
        return (value / (1 << 10)).toFixed(1) + "KB" ;
      }
      return value + "B" ;
    }
  }
}
</script>

<style scoped>

</style>